<template>
  <div class="sort">
    <div v-for="item of sortItem" :key="item.itemId" :class="item.active?'active':'sortItem'" @click="handleClick(item)">
      {{ item.itemText }}
      <img class="sortIcon" :src="item.itemIcon" />
    </div>
  </div>
</template>

<script>
// import sortDefault from '@/assets/images/sortDefault.svg'
import sortUp from '@/assets/images/sortUp.svg'
import sortDown from '@/assets/images/sortDown.svg'
export default {
  name: 'Sort',
  data() {
    return {
      active: 'base',
      sortItem: [{
        itemText: '项目名称',
        itemId: 'proj.projectname',
        itemIcon: '',
        active: false
      }, {
        itemText: '时间',
        itemId: 'proj.MODIFYDATE',
        itemIcon: '',
        active: false
      }, {
        itemText: '阶段',
        itemId: 'pp.phasename',
        itemIcon: '',
        active: false
      }]
    }
  },
  methods: {
    initNoneSort() {
      for (var m of this.sortItem) {
        m.itemIcon = ''
        m.active = false
      }
    },
    handleClick(item) {
      // 如果当前是按此排序的，即当前为选中排序状态，切换标签就行
      if (item.itemIcon) {
        item.itemIcon = item.itemIcon === sortDown ? sortUp : sortDown
      } else {
        this.initNoneSort()
        item.itemIcon = sortDown
        item.active = true
      }
      var sortText = item.itemId + (item.itemIcon === sortUp ? ' ASC' : ' DESC')
      this.$emit('submitSort', sortText, true)
    }
  }
}
</script>

<style scoped>

</style>
